<template>
  <div class="gepD4-region-year">

    <div class="gepD4-region-year-main">
      <!-- 显示当前选择的地区和年份 -->
      <!-- 假设 selectedArea 和 selectedYear 是在 data 中定义的变量 -->
      <div class="gepD4-region-year-title">
      <span class="gepD4-select-title-font">生态产品价值核算</span>

<!--        <span class="gepD4-select-title-font">{{-->
<!--          gepResultAreaOne === '市' ? '铅山县' : gepResultAreaOne-->
<!--        }}{{ selectedYear || '2024' }}年生态产品价值核算</span>-->

      </div>
      <div class="gepD4-select">

        <div class="gepD4-select-year">
          <label class="gepD4-label">选择年份：</label>
          <!-- 为 el-cascader 添加 change 事件处理器 -->
          <el-cascader
              :options="optionsYears"
              v-model="selectedYear"
              @change="handleChangeYear"
          />
        </div>

        <div class="gepD4-select-region">

        </div>

        <div class="gepD4-select-region">
          <label class="gepD4-label">选择地区：</label>
          <!-- 为 el-cascader 添加 change 事件处理器 -->
          <el-cascader
              :options="options01"
              :props="cascaderProps"
              v-model="selectedArea"
              @change="handleChange"
              placeholder="请选择地址"
          />
        </div>

      </div>
    </div>
<!--    <div class="gep-result">-->
<!--      &lt;!&ndash;      <span style="text-align: center" v-if="vep !== 0">{{ projectName }}VEP:</span>&ndash;&gt;-->
<!--      <dv-digital-flop :config="config" style="width:auto;height:auto;"/>-->
<!--    </div>-->
  </div>

</template>

<script lang="ts" setup>
import {ref, watch} from 'vue';
import {ElCascader} from 'element-plus';
import addressData01 from '@/assets/json/addressData/addressData-yanshan01.json'
import {useGepDataStore, useGepRegulationServiceStore} from "@/stores/gep";
import {storeToRefs} from "pinia";
import type { CascaderValue } from 'element-plus';
import {getRegulationServiceByPath} from "api/services/regulationService";
const gepDataStore = useGepDataStore();

const {gepYear,gepCity, gepTown, gepDistrict,isSelected} = storeToRefs(gepDataStore);

// 定义年份选项
const optionsYears = [
  {value: 2025, label: '2025'},
  {value: 2024, label: '2024'},
  {value: 2023, label: '2023',},
  {value: 2022, label: '2022', disabled: true},
  // {value: 2021, label: '2021', disabled: true},
];


// 监听地区选择框，提供测试数据
watch([gepCity, gepTown, gepDistrict, gepYear], async (newValues) => {
  // 解构出新的值
  const [newCity, newTown, newDistrict, newYear] = newValues;
  if(newCity === '市'){
    console.log('newCity',newCity)
  }else{
    const response = await getRegulationServiceByPath(Number(newYear),newCity,newDistrict,newTown)

    console.log('response', response);
    const regulationStore = useGepRegulationServiceStore();

    // 从接口中提取并赋值
    regulationStore.$patch({
      inWaterSourceConservation: response.data.outWaterSourceConservation || 0, // 如果字段存在
      inSoilConservation: response.data.outSoilConservation || 0,
      inAirPurification: response.data.outAirPurification || 0,
      inWaterPurification: response.data.outWaterPurification || 0,
      inCarbonSequestration: response.data.outCarbonSequestration || 0,
      inClimateRegulation: response.data.outClimateRegulation || 0,
      inFloodRegulation: response.data.outCalcFloodRegulation || 0,
    });
    isSelected.value = true;
  }
})


// 级联选择器的属性设置
const cascaderProps = {
  value: 'value',
  label: 'label',
  children: 'children'
};
const options01 = ref(addressData01);

let {selectedYear,selectedArea} = storeToRefs(gepDataStore);

const handleChangeYear = (values: any) => {
  selectedYear.value = values[0];

  gepYear.value = selectedYear.value
  // console.log('selectYear',selectYear);
}

// 处理选择变化
const handleChange = (value?: CascaderValue) => {
  // 使用类型守卫确保 value 是数组
  if (!Array.isArray(value) || value.length === 0) return;

  const selectedRegion = value[0];

  // 固定设置市级为“上饶市”，区级为“铅山县”
  gepCity.value = '上饶市';
  gepDistrict.value = '铅山县';

  if (selectedRegion === '铅山县') {
    gepTown.value = '总计';
  } else {
    gepTown.value = String(selectedRegion); // 确保是字符串
  }
};
</script>

<style scoped>
.gepD4-region-year {
  position: relative;
  width: 100%;
  height: 100%;
}

.gepD4-region-year-main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 使子元素在父容器中均匀分布 */
}


.gepD4-region-year-title {
  flex: 2;
  text-align: center;
  padding-top: 70px;

}

.gepD4-select {
  flex: 1;
  display: flex;
  flex-direction: row;
  z-index: 1;
  justify-content: space-between; /* 使子元素在父容器中均匀分布 */
  padding-right: 20px;
  margin-top: 50px;

}

.gepD4-select-year {
  flex: 1;
}

.gepD4-select-region {
  flex: 1;

}


</style>
